<template>
  <view>
    <view class="group-wrap">
      <u-waterfall v-model="flowList" ref="uWaterfall">
        <template v-slot:left="{ leftList }">
          <view
            class="waterfall-demo-warter"
            v-for="(item, index) in leftList"
            :key="index"
          >
            <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
            <view style="position: relative">
              <u-lazy-load
                threshold="-450"
                border-radius="10"
                :image="item.image"
                :index="index"
              ></u-lazy-load>
              <view class="warter-position">
                <image
                  src="https://image.qqpyyds.com/mpAppImg/icon/play1_icon.png"
                  class="image_8 warter-position-video"
                />
              </view>
              <view class="warter-position-blogger">
                <image src="" class="image_8" />
                <text class="warter-position-text">书香姑娘</text>
                <!-- <u-button :custom-style="customStyle" size="mini">TA已买</u-button> -->
                <view class="right-text-wrapper flex-col items-center">
                  <text>TA已买</text>
                </view>
              </view>
            </view>
            <view class="warter-text">
              <view class="demo-shop">
                {{ item.shop }}
              </view>
              <view class="demo-tag">
                <view class="demo-tag-owner"> 已开启帮卖 </view>
                <view class="demo-tag-text"> 自由定价 </view>
              </view>
              <view class="demo-title">
                {{ item.title }}
              </view>
              <view class="demo-price">
                <view
                  ><text style="font-size: 20rpx">￥</text
                  >{{ item.price }}</view
                >
                <!-- <u-icon name="shopping-cart"></u-icon> -->
                <u-icon name="shopping-cart" color="#FF4D71" size="32"></u-icon>
              </view>
            </view>
            <view class="supply_colonel flex-row">
              <text>供货团长：</text>
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329178584454827.png"
                class="supply_colonel-image"
              />
              <text class="supply_colonel-text">供货团长昵称</text>
            </view>
            <view class="data-bottom-section flex-row">
              <view class="left-section flex-col items-center">
                <text class="text_50">456</text>
                <text class="text_52">销售额</text>
              </view>
              <view class="left-section flex-col items-center">
                <text class="text_50">12</text>
                <text class="text_52">跟团次数</text>
              </view>
              <view class="left-section flex-col items-center">
                <text class="text_50">23</text>
                <text class="text_52">实际收入</text>
              </view>
            </view>
            <view>
              <u-button type="error" class="waterfall-help-sell" size="medium">
                <u-icon name="weixin-fill" style="margin-right: 6rpx"></u-icon>
                一键邀请帮卖
              </u-button>
            </view>
          </view>
        </template>
        <template v-slot:right="{ rightList }">
          <view
            class="waterfall-demo-warter"
            v-for="(item, index) in rightList"
            :key="index"
          >
            <view style="position: relative">
              <u-lazy-load
                threshold="-450"
                border-radius="10"
                :image="item.image"
                :index="index"
              ></u-lazy-load>
              <view class="warter-position">
                <image
                  src="https://image.qqpyyds.com/mpAppImg/icon/play1_icon.png"
                  class="image_8 warter-position-video"
                />
              </view>
              <view class="warter-position-blogger">
                <image src="" class="image_8" />
                <text class="warter-position-text">书香姑娘</text>
                <!-- <u-button :custom-style="customStyleRight" size="mini">TA已买</u-button> -->
                <view class="flex-col items-center">
                  <text class="right-text-wrapper">TA已买</text>
                </view>
              </view>
            </view>
            <view class="warter-text">
              <view class="demo-shop">
                {{ item.shop }}
              </view>
              <view class="demo-tag">
                <view class="demo-tag-owner"> 已开启帮卖 </view>
                <view class="demo-tag-text"> 自由定价 </view>
              </view>
              <view class="demo-title">
                {{ item.title }}
              </view>
              <view class="demo-price">
                <view
                  ><text style="font-size: 20rpx">￥</text
                  >{{ item.price }}</view
                >
                <!-- <u-icon name="shopping-cart"></u-icon> -->
                <u-icon name="shopping-cart" color="#FF4D71" size="32"></u-icon>
              </view>
            </view>
            <view class="supply_colonel flex-row">
              <text>供货团长：</text>
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329178584454827.png"
                class="supply_colonel-image"
              />
              <text class="supply_colonel-text">供货团长昵称</text>
            </view>
            <view class="data-bottom-section flex-row">
              <view class="left-section flex-col items-center">
                <text class="text_50">456</text>
                <text class="text_52">销售额</text>
              </view>
              <view class="left-section flex-col items-center">
                <text class="text_50">12</text>
                <text class="text_52">跟团次数</text>
              </view>
              <view class="left-section flex-col items-center">
                <text class="text_50">23</text>
                <text class="text_52">实际收入</text>
              </view>
            </view>
            <view>
              <u-button type="error" class="waterfall-help-sell" size="medium">
                <u-icon name="weixin-fill" style="margin-right: 6rpx"></u-icon>
                一键邀请帮卖
              </u-button>
            </view>
          </view>
        </template>
      </u-waterfall>
      <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus"></u-loadmore>
    </view>
  </view>
</template>
<script>
export default {
  name: "Waterfall",
  data() {
    return {
      flowList: [
        {
          price: 35,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
        {
          price: 75,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
        {
          price: 35,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
      ],
      list: [
        {
          price: 35,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
        {
          price: 75,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
        {
          price: 35,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
        {
          price: 75,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
        {
          price: 35,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
        {
          price: 75,
          title: "内容标题最多两行内容标题最多两行内容标题最多两行标题最…",
          shop: "230w观看丨2344跟团丨328帮卖",
          image:
            "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16319329182309152968.png",
        },
      ],
      loadStatus: "loadmore",
    };
  },
  onLoad() {
  	this.addRandomData();
  },
  onReachBottom() {
    console.log('--------------向下滚动');
	this.loadStatus = 'loading';
    // 模拟数据加载
    setTimeout(() => {
	//   this.addRandomData();
	  this.loadStatus = 'loadmore';
	}, 3000)
  },
  methods: {
    addRandomData() {
      for(let i = 0; i < 5; i++) {
        let index = this.$u.random(0, this.list.length - 1);
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(this.list[index]))
        item.id = this.$u.guid();
        this.flowList.push(item);
      }
    },
  },
};
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
// 视频流
.group-wrap {
  padding: 20rpx 0 20rpx 10rpx;
  padding-top: 20rpx;
  background-color: #f2f3f5;
}
.waterfall-demo-warter {
  border-radius: 16rpx;
  margin: 0 10rpx 20rpx;
  background-color: #fff;
  // background-color: #f2f3f5;
  position: relative;
  .warter-text {
    padding: 0 8rpx;
  }
  .warter-position {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
  }
  .warter-position-blogger {
    position: absolute;
    bottom: 20rpx;
    left: 20rpx;
    display: flex;
    align-items: center;
    .warter-position-text {
      color: #fff;
      margin: 0 6rpx;
    }
  }
}
view:last-child .waterfall-demo-warter {
  margin: 0 10rpx 20rpx 0;
}
.u-close {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
}
.demo-image {
  width: 100%;
  border-radius: 4px;
}
.demo-title {
  font-size: 24rpx;
  margin-top: 5px;
  color: $u-main-color;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.demo-tag {
  display: flex;
  margin-top: 5px;
}
.demo-tag-owner {
  background-color: #e44435;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 4rpx 14rpx;
  border-radius: 50rpx;
  font-size: 20rpx;
  // line-height: 1;
  height: 36rpx;
}
.demo-tag-text {
  // background-color: #E44435;
  background: #fff0f0;
  color: #e44435;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
  height: 36rpx;
}
.demo-price {
  font-size: 30rpx;
  color: #ff4d71;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}
.demo-shop {
  font-size: 22rpx;
  color: $u-tips-color;
  margin-top: 5px;
}

.section_8 {
  // display: none;
  margin: 0 10rpx 20rpx 0;
  padding: 36rpx 71rpx 34rpx 72rpx;
  background-color: rgb(220, 222, 224);
}
.image_20 {
  align-self: center;
  width: 56rpx;
  height: 56rpx;
}
.text_45 {
  align-self: center;
  color: rgb(50, 50, 51);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.group_29 {
  color: rgb(50, 50, 51);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
}
.image_21 {
  margin: 4rpx 0 6rpx 9rpx;
  width: 16rpx;
  height: 24rpx;
}
// .waterfall-help-sell {
// //   height: 64rpx !important;
// }

// TA已买
.right-text-wrapper {
  width: 68rpx;
  height: 30rpx;
  line-height: 30rpx;
  margin-left: 8rpx;
  text-align: center;
  color: rgb(228, 68, 53);
  font-size: 16rpx;
  border: #E44435 1rpx solid;
  border-radius: 4rpx;
}

// 供货团长
.supply_colonel {
  color: rgb(0, 0, 0);
  font-size: 20rpx;
  line-height: 28rpx;
  white-space: nowrap;
  padding: 6rpx 12rpx 4rpx;
  background-color: rgb(242, 243, 245);
  border-radius: 4rpx;
  margin: 12rpx 8rpx 0;
  .supply_colonel-image {
    border-radius: 4rpx;
    width: 26rpx;
    height: 28rpx;
  }
  .supply_colonel-text {
    margin-left: 8rpx;
  }
}

.data-bottom-section {
  padding: 12rpx 0;
}
</style>
